<template>
	<view class="qdDetal" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom :title="title" :isCircle="true" :isBlur="false" :isSpace="false" linkId="usr10sf1ht7klr2a" :isAppBtn="!isApp" :isHome="!isApp" :linkData="linkData">
			<template v-if="isApp">
				<view slot="right" class="share fboxRow Ycenter Xcenter" @click="shareTap">
					<text class="bwfont bw-zhuanfa font30" style="color: #F7F9FF"></text>
				</view>
			</template>
		</HeadCustom>
		<view class="" v-if="pageStatus=='data'">
			<text class="bwfont turn_btn1"></text>
			<text class="music_btn bwfont" :class="{ 'bw-guanbiyinle': !isPlay, 'bw-a-ziyuan12': isPlay }" @click="playAudio" id="musicBox"></text>
			<swiper class="swiper" @transition="transitionswiper" :vertical="true" :current="currentPage" @change="changePage">
				<swiper-item>
					<view class="swiper-item">
						<BackGround :backMsg="hyMsg"></BackGround>
						<text class="turn_btn bw-zhankai bwfont" @tap="turnPage"></text>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y swiper-inner" @scroll="scroll">
							<ConferenceDetail
								ref="conferenceRef"
								@pauseVideo="pauseVideo"
								:isApp="Number(isApp)"
								:btnArr="btnArr"
								:hyMsg="hyMsg"
								:colorData="colorObj[hyMsg.invitationStyle]"
							></ConferenceDetail>
						</scroll-view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="fboxCol Ycenter Xcenter zwsj" v-if="pageStatus=='noData'">
			<image src="https://ebc-prod.cdn.benwunet.com/uni-static/h5/zwsj.png" mode="widthFix"></image>
			<text class="font26">活动不存在</text>
		</view>
	</view>
</template>

<script>
import { conferenceDetailForOrg, conferenceGetByConferenceId, conferenceSign } from '@/api/h5.js';
import { judgeIsLogin } from '@/static/js/common.js';
import { utf8to16, base64decode } from '@/static/js/Base64.js';
import { getRequest } from '@/static/js/common.js';
import BackGround from '@/bwSign/components/backGround.vue';
import ConferenceDetail from '@/bwSign/components/conferenceDetail.vue';
import {wxSdk} from '@/static/js/wxjsdk.js';
const Audio = uni.createInnerAudioContext();
export default {
	components: { BackGround, ConferenceDetail },
	data() {
		return {
			theme: getApp().globalData.appTheme,
			globalColor: getApp().globalData.globalColor,
			isApp: 0,
			currentPage: 0,
			title: '',
			backMsg: {},
			btnArr: [
				{ name: '立即报名', color: 1, func: 'RegisterNow', isShow: false },
				{ name: '已报名', color: 2, isShow: false },
				{ name: '报名已截止', color: 2, isShow: false },
				{ name: '立即签到', color: 1, func: 'signNow', isShow: false },
				{ name: '扫码签到', color: 1, func: 'sweepNow', isShow: false },
				{ name: '已签到', color: 2, isShow: false },
				{ name: '签到已截止', color: 2, isShow: false },
				{ name: '活动结束', color: 2, isShow: false },
				{ name: '活动未开始', color: 2, isShow: false },
				{ name: '签到未开始', color: 2, isShow: false },
				{ name: '报名未开始', color: 2, isShow: false }
			],
			personal: 0,
			form: [
				{
					mc: '主题',
					type: 'themeName'
				},
				{
					mc: '时间',
					type: 'time'
				},
				{
					mc: '地址',
					type: 'address',
					icon: 'bw-a-lianji14',
					func: 'openMap'
				},
				{
					mc: '联系方式',
					type: 'contact',
					icon: 'bw-dianhua2',
					func: 'goPhone'
				},
				{
					mc: '主办方',
					type: 'sponsors'
				},
				{
					mc: '承办方',
					type: 'organizers'
				}
			],
			detailType: '',
			conferenceId: '', // 会议id
			dataTypeList: [],
			hyMsg: {},
			linkData: { id: '' },
			isShowLogin: false,
			sys: {},
			firstPlayVideo: true,
			scrollTop: 0,
			isPlay: false,
			colorObj: {
				样式1: {
					msgBackColor: '#154433',
					btnColor: 'linear-gradient(270deg, #21AF7B 0%, #9DE177 100%)',
					backColor: '#123726',
					themeImg: 'https://ebc-prod.cdn.benwunet.com/uni-static/img3.3.0/bwq/mxqh.png'
				},
				样式2: {
					msgBackColor: '#202E69',
					btnColor: 'linear-gradient(270deg, #7956FF 0%, #1F45E7 100%)',
					backColor: '#172355',
					themeImg: 'https://ebc-prod.cdn.benwunet.com/uni-static/img3.3.0/bwq/wlzx.png'
				},
				样式3: {
					msgBackColor: '#1B1B53',
					btnColor: 'linear-gradient(270deg, #E489F0 0%, #605BFF 100%)',
					backColor: '#0F0F2F',
					themeImg: 'https://ebc-prod.cdn.benwunet.com/uni-static/img3.3.0/bwq/kjqy.png'
				}
			},
			pageStatus: 'loading'
		};
	},
	onLoad(option) {
		if (option && option.benwu) {
			let benwu = utf8to16(base64decode(option.benwu));
			const token = {
				statusBarHeight: getRequest(benwu, 'statusBarHeight'),
				access_token: getRequest(benwu, 'token')
			};
			getApp().globalData.statusBarHeight = token.statusBarHeight;
			uni.setStorageSync('bw_params', JSON.stringify(token));
		}
		if (option && option.conferenceId) {
			// 企业本无签邀请函
			this.conferenceId = option.conferenceId;
			this.linkData.id = option.conferenceId;
			const { bw_link } = getApp().getBWData(['bw_link']);
			uni.setStorageSync('bw_link', JSON.stringify(bw_link));
			this.getDetail();
			if (bw_link.isApp) {
				// bw_link.isApp = option.isApp;
				this.isApp = bw_link.isApp;
				// this.title = '详情';
			} else {
				uni.setNavigationBarTitle({
					title: `详情`
				});
			}
		}
	},
	onShow() {
		this.btnArr.forEach(item => {
			item.isShow = false;
		});
		this.conferenceGetUser();
	},
	mounted() {
		// #ifdef H5
		window.appSweepCallback = this.appSweepCallback;
		// #endif
	},
	destroyed() {
		Audio.destroy();
	},
	watch: {
		'hyMsg.invitationMusic': {
			handler(val) {
				if (val) {
					this.$nextTick(() => {
						this.playAudio('first');
					});
				}
			},
			deep: true,
			immediate: true
		}
	},
	onHide() {
		Audio.destroy();
	},
	methods: {
		scroll(e) {
			let obj = e.detail;
			if (obj.deltaY > 0 && obj.scrollTop < -100) {
				// 向上滑动 && scrollTop  < 0
				this.currentPage = 0;
			}
		},
		isAnimation(type) {
			for (var i = 0; i < 6; i++) {
				let musicBox = document.getElementById('musicBox');
				musicBox.style.animationPlayState = type;
			}
		},
		turnPage() {
			this.currentPage = 1;
		},
		changePage(e) {
			if (e.detail.current == 0) {
				this.currentPage = 0;
				this.$refs.conferenceRef.show = false;
			} else {
				this.currentPage = 1;
				this.$refs.conferenceRef.show = true;
				this.$refs.conferenceRef.getVideoList(this.firstPlayVideo);
			}
			this.firstPlayVideo = false;
		},
		transitionswiper(e) {
			// if (this.currentPage == 1 && e.detail.dy <= -100) {
			// 	this.currentPage = 0;
			// }
		},
		pauseVideo(data) {
			this.isPlay = data;
			this.playAudio();
		},
		playAudio(type) {
			if (Audio) {
				//执行播放
				if (this.isPlay) {
					Audio.pause();
					this.isAnimation('paused');
					this.isPlay = false;
				} else {
					if (!this.hyMsg.autoplayMusic && type == 'first') {
					} else {
						this.$refs.conferenceRef.pauseAllVideo();
						Audio.play();
						Audio.onPlay(() => {
							this.isAnimation('running');
							this.isPlay = true;
						});
					}
				}
				Audio.onError(res => {
					console.log('onError', res);
				});
				Audio.onPause(res => {
					console.log('end');
					this.isAnimation('paused');
					this.isPlay = false;
				});
			}
		},
		playMusic() {},
		// 格式化时间
		formatDate(time) {
			let date = time.split(' ')[0];
			return date.replaceAll('-', '.');
		},
		// 获取详情数据(个人)
		conferenceGetUser() {
			conferenceGetByConferenceId({ conferenceId: this.conferenceId }).then(res => {
				if (res.data) {
					this.pageStatus = 'data'
					const data = res.data;
					// 直接签到
					if (data.applySignMode) {
						// 已签到
						if (data.isSign) {
							this.btnArr.forEach(item => {
								if (item.name == '已签到') {
									item.isShow = true;
								}
							});
							return;
						}
						if (data.conferenceStatus == 1) {
							this.btnArr.forEach(item => {
								if (item.name == '扫码签到' && data.signMode == 1) {
									item.isShow = true;
									if (!this.isApp) {
										item.name = '下载app扫码签到';
									}
								} else if (item.name == '立即签到' && data.signMode == 0) {
									item.isShow = true;
								}
							});
						} else if (data.conferenceStatus == 2) {
							this.btnArr.find(item => {
								if (item.name == '活动结束') {
									item.isShow = true;
								}
							});
						} else {
							this.btnArr.find(item => {
								if (item.name == '活动未开始') {
									item.isShow = true;
								}
							});
						}
						return;
					}
					// this.dataTypeList = JSON.parse(res.data.content);
					// 会议状态 未开始-0 进行中-1 已结束-2
					if (data.conferenceStatus == 1) {
						if (data.applyStatus == 1) {
							if (data.isApply) {
								if (data.signStatus == 1) {
									if (data.isSign) {
										this.btnArr.find(item => {
											if (item.name == '已签到') {
												item.isShow = true;
											}
										});
									} else {
										this.btnArr.forEach(item => {
											if (item.name == '扫码签到' && data.signMode == 1) {
												item.isShow = true;
												if (!this.isApp) {
													item.name = '下载app扫码签到';
												}
											} else if (item.name == '立即签到' && data.signMode == 0) {
												item.isShow = true;
											}
										});
									}
								} else if (data.signStatus == 2) {
									this.btnArr.find(item => {
										if (item.name == '签到截止') {
											item.isShow = true;
										}
									});
								} else {
									console.log('签到未开始...');
									this.btnArr.find(item => {
										if (item.name == '已报名') {
											item.isShow = true;
										}
									});
								}
							} else {
								this.btnArr.find(item => {
									if (item.name == '立即报名') {
										item.isShow = true;
									}
								});
							}
						} else if (data.applyStatus == 2) {
							this.btnArr.find(item => {
								if (item.name == '报名截止') {
									item.isShow = true;
								}
							});
						} else {
							this.btnArr.find(item => {
								if (item.name == '报名未开始') {
									item.isShow = true;
								}
							});
						}
					} else if (data.conferenceStatus == 2) {
						this.btnArr.find(item => {
							if (item.name == '会议结束') {
								item.isShow = true;
							}
						});
					} else {
						this.btnArr.find(item => {
							if (item.name == '会议未开始') {
								item.isShow = true;
							}
						});
					}
				}else{
					this.pageStatus = 'noData'
				}
			}).catch(err=>{
				this.pageStatus = 'noData'
			});
		},
		shareTap() {
			const data = {
				type: 'shareInvitation',
				url: `${location.origin}${location.pathname}#/bwSign/invitationLetter?conferenceId=${this.hyMsg.conferenceId}`,
				themeName: this.hyMsg.themeName,
				gmtStart: this.formatDate(this.hyMsg.gmtStart),
				gmtEnd: this.formatDate(this.hyMsg.gmtEnd),
				themeBanner: this.hyMsg.themeBanner,
				address: this.hyMsg.address
			};
			this.$bridge.callHandler('recruitHandler', data, () => {
				console.log('recruitHandler', '返回');
			});
		},
		// 查看图片
		picPreview(urls, index) {
			uni.previewImage({
				urls: [urls],
				current: index
			});
		},
		// 打开电话界面
		goPhone() {
			if (this.isApp) {
				const data = { type: 'callPhone', contact: this.hyMsg.contact };
				this.$bridge.callHandler('appHandler', data, () => {
					console.log('appHandler', '返回');
				});
			} else {
				uni.makePhoneCall({
					phoneNumber: this.hyMsg.contact,
					success: function(res) {
						console.log(res);
					}
				});
			}
		},
		openOther(item) {
			if (item.func) {
				this[item.func]();
			}
		},
		// 打开地图弹框 选择地图
		openMap() {
			if (this.isApp) {
				const data = { type: 'address', latitude: this.hyMsg.latitude, longitude: this.hyMsg.longitude, workAddress: this.hyMsg.address };
				this.$bridge.callHandler('recruitHandler', data, () => {
					console.log('recruitHandler', '返回');
				});
			} else {
				const obj = {
					latitude: this.hyMsg.latitude,
					longitude: this.hyMsg.longitude,
					name: this.hyMsg.address
				};
				// 仅在小程序使用这种地图导航
				// #ifdef MP
				uni.openLocation({
					...obj,
					success: function() {
						console.log('成功');
					},
					fail: function() {
						console.log('失败了');
					}
				});
				// #endif
			}
		},
		// 底部按钮操作
		openCz(item) {
			if (item.func) {
				this[item.func]();
			}
		},
		// 立即报名
		RegisterNow() {
			console.log('===========', this.isApp);
			const data = JSON.parse(this.hyMsg.applyFields);
			getApp().globalData.signMsg = [...data];
			if (this.isApp) {
				this.$pageTo('/bwSign/applyHy?conferenceId=' + this.conferenceId + '&themeBanner=' + this.hyMsg.themeBanner);
			} else {
				if (!judgeIsLogin()) {
					this.$nextTick(() => {
						this.$refs.notLogin.openLogin({
							show: true,
							position: 'center'
						});
					});
					return;
				}
				this.$pageTo('/bwSign/applyHy?conferenceId=' + this.conferenceId + '&themeBanner=' + this.hyMsg.themeBanner);
			}
		},
		// 立即签到
		signNow() {
			if (this.isApp) {
				this.$pageTo('/bwSign/conferenceSign?conferenceId=' + this.conferenceId + '&themeName=' + this.hyMsg.themeName);
			} else {
				if (!judgeIsLogin()) {
					this.$nextTick(() => {
						this.$refs.notLogin.openLogin({
							show: true,
							position: 'center'
						});
					});
					return;
				}
				this.$pageTo('/bwSign/conferenceSign?conferenceId=' + this.conferenceId + '&themeName=' + this.hyMsg.themeName);
			}
		},
		appSweepCallback(res) {
			const url = res;
			const conferenceId = url.split('?')[1].split('=')[1];
			conferenceSign({ conferenceId: conferenceId }).then(res => {
				if (res.data) {
					this.$pageTo('/bwSign/conferenceSign?conferenceId=' + conferenceId + '&themeName=' + this.hyMsg.themeName + '&isShowSubmit=' + true);
				}
			});
		},
		// 扫码签到
		sweepNow() {
			if (this.isApp) {
				const data = { type: 'sweepNow' };
				this.$bridge.callHandler('recruitHandler', data, () => {
					console.log('recruitHandler', '返回');
				});
			} else {
				this.$pageTo('/about/guidePage');
			}
		},
		// 获取详情数据(企业)
		getDetail() {
			uni.showLoading({
				mask: true,
				title: '加载中...'
			});
			conferenceDetailForOrg({ conferenceId: this.conferenceId })
				.then(res => {
					if (res.data) {
						this.pageStatus = 'data'
						this.hyMsg = res.data;
						this.dataTypeList = JSON.parse(res.data.content);
						Audio.src = this.hyMsg.invitationMusic; //音频地址
						const timeObj = {
							title: res.data.themeName,
							desc: `${this.formatDate(res.data.gmtStart)} - ${this.formatDate(res.data.gmtEnd)} \n 诚意邀请您参加`,
							imgUrl: res.data.themeBanner,
							link: `${location.origin}${location.pathname}#/bwSign/invitationLetter?conferenceId=${this.conferenceId}`
						};
						wxSdk.setShareData(timeObj, {});
					}else{
						this.pageStatus = 'noData'
					}
				}).catch(err=>{
					this.pageStatus = 'noData'
				}).finally(() => {
					uni.hideLoading();
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.zwsj {
	height: 100vh;
	> image {
		width: 290rpx;
		height: 290rpx;
	}
	> text {
		// color: var(--contentFontFourColor);
		color: #7A7E91;
		position: relative;
		top: -60rpx;
	}
}
@media screen and (min-width: 780px) {
	.music_btn {
		font-size: 30px;
	}
}
.qdDetal {
	position: relative;
	min-height: 100vh;
	.music_btn {
		position: absolute;
		z-index: 1;
		right: 28rpx;
		top: 193rpx;
		animation: Spin 2s linear infinite;
		animation-play-state: paused;
		background: rgba(0, 0, 0, 0.2);
		border: 1px solid #f1f7fa;
		border-radius: 50%;
		padding: 10rpx;
		color: #fff;
	}
	@keyframes Spin {
		0% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}
	.turn_btn1 {
		color: #ffffff;
		font-size: 20rpx;
		position: absolute;
		z-index: 1;
		transform: translate(-50% -50%);
		left: 50%;
		top: 100rpx;
	}
}
.swiper {
	height: calc(100vh);
}
.share {
	background: rgba(0, 0, 0, 0.2);
	width: 29px;
	height: 29px;
	border-radius: 50%;
}
.swiper-item {
	display: block;
	height: calc(100vh);
	position: relative;
	.turn_btn {
		font-size: 20rpx;
		position: absolute;
		z-index: 1;
		transform: translate(-50% -50%);
		left: 50%;
		bottom: 100rpx;
		animation: twinkle 1s cubic-bezier(0, 0, 0.2, 1) infinite;
		animation-direction: alternate;
	}
	@keyframes twinkle {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
}
.swiper-inner {
	height: calc(100vh);
}
.swiper-action {
	touch-action: none;
}
</style>
